<template>
  <div style="padding-top:40px;">
    <div class="zan-row pin-container" v-for="(item,index) in fight_group_tpls" :key="index">
      <div class="zan-col zan-col-24">
        <image style="height:150px;width:100%;" :src="item.picture_url"></image>
        <div style="margin: 5px 5px 0 5px;">
          <span style="display:block;">{{item.title}}</span>
        </div>
        <div style="margin: 10px 5px 15px 5px;">
          <span class="price-label">￥{{item.price/100}}</span>
          <span class="pin-count">已拼{{item.sale_num}}件</span>
          <button style="float:right;" class="zan-btn zan-btn--small zan-btn--danger" @click="handleGoFightGroup(item)">去拼单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapGetters([
      'fight_group_tpls',
      'user'
    ])
  },
  methods: {
    ...mapActions(['fetchFightGroupTpls']),
    handleGoFightGroup(fight_group_tpl) {
      this.$router.push({path: 'group_detail', query: {group_tpl_id: fight_group_tpl.id}})
    },
  },
  async mounted () {
    this.fetchFightGroupTpls({brand_id: this.user.brand_id, page:0, limit:10})
  }
}
</script>

<style >
.pin-container {
  margin:10px 0 10px 0;
  background:#FFF;
}
.price-label {
  color:#FF4040;
  font-size:16px;
  font-weight:bold;
}
.pin-count {
  margin-left:5px;
  color:#858585;
  font-size:11px;
}
.search{
  border: 1px solid #969696;
  width: 90%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  margin: 10px auto;
  border-radius: 16px;
  white-space:nowrap;
  text-overflow:ellipsis;
  word-break:break-all;
  overflow:hidden;
}
.loaction {
  height: 45px;
  line-height: 45px;
  padding-left: 15px;
}
</style>
